import { resolveComponent } from 'vue'
import { fliterDataWrapper } from 'common/js/table'

export const columns = (that) => {

  return [
    {
      key: 'id',
      align: 'center',
      width: 120,
      title: '雷达图编码',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'id')
      }
    },
    {
      key: 'previewUrl',
      align: 'center',
      title: '最新雷达图',
      render: (h, params) => {
        const { row } = params

        return h('img', {
          src: row.previewUrl,
          style: 'width: 500px;'
        })
      }
    },
    {
      key: 'tm',
      align: 'center',
      title: '监测时间',
      width: 160,
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'tm')
      }
    },
    {
      key: 'status',
      align: 'center',
      title: '状态',
      width: 120,
      render: (h, params) => {
        const { row } = params
        const status = row.status
        let color = '#19be6b' // 默认绿色

        // 根据状态设置不同颜色
        if (status === '延迟1小时') {
          color = '#ff9900'
        } else if (status === '延迟3小时') {
          color = '#ff7700'
        } else if (status === '延迟12小时') {
          color = '#ff5500'
        } else if (status === '延迟1天') {
          color = '#ff3300'
        } else if (status === '延迟3天') {
          color = '#ff1100'
        } else if (status === '延迟7天以上' || status === '数据缺失') {
          color = '#ed4014'
        }

        return h('span', { style: { color } }, row.status || '--')
      }
    },
    // {
    //   key: 'action',
    //   title: '操作',
    //   width: 70,
    //   align: 'center',
    //   render: (h, params) => {
    //     const { row } = params
        
    //     const list = [
    //       { text: '详情', type: 'primary', clickFn: () => { that.resetPsd(row) } }
    //     ]

    //     return h(resolveComponent('TableButton'), {
    //       list
    //     })
    //   }
    // }
  ]
}
